<template>
  <div :id="chartId" :style="{ height: height }"></div>
</template>

<script>
/** mixin */
import { mixin_echarts_bar } from '@ticui/mixins/mixin_echarts_bar'
/** 工具 */
import { formateTec } from '@tapui/utils/util'

export default {
  name: 'progressEchartsBarComponent',
  mixins: [mixin_echarts_bar],
  data() {
    return {
      chartId: 'progress_echarts_bar',
      // y轴类型对应的数据
      yAxisTypeMap: {
        money: {
          label: '金额',
          unit: '万元', // 单位
          field: 'money', // 交付字段
          finishField: 'newfund', // 履约字段
          formateFun: formateTec // 格式化方法
        },
        amount: {
          label: '数量',
          unit: '只',
          field: 'amount',
          finishField: 'newamount',
          formateFun: (val) => `${Number(val)}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
        }
      }
    }
  },
  props: {
    height: {
      type: String,
      default: '600px'
    },
    // 数据
    echartsData: {
      type: Array,
      default: () => []
    },
    // 是否显示滑块
    showSlider: {
      type: Boolean,
      default: true
    },
    // Y轴显示类型
    yAxisType: {
      type: String,
      default: 'money'
    },
    // y轴缩放范围:起始值
    dataZoomStartValue: {
      type: Number,
      default: 0
    },
    // y轴缩放范围:结束值
    dataZoomEndValue: {
      type: Number,
      default: 0
    }
  },
  computed: {
    resetField() {
      return this.yAxisTypeMap[this.yAxisType]
    },
    // 根据Y轴类型得到的数据
    resetData() {
      return (index) => ({
        ...this.echartsData[index],
        fieldVal: Number(this.echartsData[index][this.resetField.field]), // 交付产品数据
        finishFieldVal: Number(this.echartsData[index][this.resetField.finishField]), // 履约产品数据
        displayFieldVal: this.resetField.formateFun(this.echartsData[index][this.resetField.field]), // 交付产品显示数据
        displayFinishFieldVal: this.resetField.formateFun(this.echartsData[index][this.resetField.finishField]) // 履约产品显示数据
      })
    },
    // 未交付产品的金额或数量
    unFinishFieldVal() {
      return (index) => {
        let val = this.resetData(index).fieldVal - this.resetData(index).finishFieldVal
        return val > 0 ? val : 0
      }
    },
    // y轴最大值
    yAxisMaxValue() {
      return this.echartsData.reduce((acc, cur, index) => Math.max(acc, this.resetData(index).fieldVal, this.resetData(index).finishFieldVal), 0)
    },
    watchPropsFields() {
      return this.yAxisType + this.dataZoomStartValue + this.dataZoomEndValue
    }
  },
  watch: {
    // 重新绘制图表
    watchPropsFields(val) {
      this.drawBarStatic()
    }
  },
  methods: {
    /** 初始化柱状图数据 */
    drawBarStatic() {
      this.barData = {
        legend: [
          {
            left: 'left',
            top: '5',
            data: [{ name: '履约产品' }, '\n', { name: '待交付产品' }]
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow' // 指示器类型
          },
          formatter: (params) =>
            `<b>产品名称：</b>${params[0].name}<br/>
            <b>履约${this.resetField.label}：</b>${this.resetData(params[0].dataIndex).displayFinishFieldVal} ${this.resetField.unit}<br/>
            <b>交付${this.resetField.label}：</b>${this.resetData(params[0].dataIndex).displayFieldVal} ${this.resetField.unit}<br/>`
        },
        series: [
          // 数据
          {
            color: '#61a0a8',
            name: '履约产品',
            type: 'bar',
            stack: 'product', // 分组，用于堆叠
            data: this.echartsData.map((item, index) => this.resetData(index).finishFieldVal)
          },
          {
            color: '#cecece',
            name: '待交付产品',
            type: 'bar',
            stack: 'product',
            label: {
              show: true,
              position: 'top',
              offset: [-40, 0],
              align: 'left',
              color: '#61a0a8',
              formatter: (params) => `履约：${this.resetData(params.dataIndex).displayFinishFieldVal} ${this.resetField.unit}\n交付：${this.resetData(params.dataIndex).displayFieldVal} ${this.resetField.unit}`
            },
            data: this.echartsData.map((item, index) => this.unFinishFieldVal(index))
          }
        ],
        xAxis: {
          // X轴
          type: 'category',
          name: '产品名称',
          data: this.echartsData.map((item) => item.productname)
        },
        yAxis: {
          // Y轴
          type: 'value',
          name: `${this.resetField.label}（${this.resetField.unit}）`
        },
        grid: {
          top: '100',
          left: '80',
          right: '180',
          bottom: this.echartsData.length > 10 ? '90' : '20'
        },
        dataZoom: [
          {
            type: 'slider', // 滑块式
            show: this.showSlider,
            startValue: this.dataZoomStartValue,
            endValue: this.dataZoomEndValue || this.yAxisMaxValue, // y轴最大值
            filterMode: 'none', // 超出范围仍然显示
            yAxisIndex: [0], // 控制y轴
            right: '32'
          },
          {
            type: 'slider', // 滑块式
            show: this.echartsData.length > 10 && this.showSlider,
            startValue: 0,
            endValue: 9,
            height: 25,
            showDetail: false,
            xAxisIndex: [0] // 控制x轴
          }
        ]
      }
      this.drawChart(this.barData, this.chartId)
    }
  }
}
</script>
<style lang="scss" scoped></style>
